<template>
	<div class="app-container">
		<!-- <h2>呼点视频会议</h2> -->
		<div>
			<el-row :gutter="20">
				<el-col :span="14">
					<el-row :gutter="20">
						<el-col :span="8">
							<button class="btn-add" @click="kuaisu">快速会议</button>
						</el-col>
						<el-col :span="8">
							<button class="btn-add" @click="yuyue">预约会议</button>
						</el-col>
						<el-col :span="8">
							<button class="btn-add" @click="dxqf">短信群发</button>
						</el-col>
					</el-row>
					<el-row>
						<label>可参加会议</label>
						<div style="height: 68vh;overflow-x: hidden;">
							<el-card class="box-card" v-for="(item, key) in meetingList" :key="key"
								style="margin-bottom: 20px;margin-right: 10px;">
								<el-row>
									<el-row>
										<el-col :span="12">
											<p>发起人：{{item.masterName}}</p>
										</el-col>
										<el-col :span="12">
											<p>{{item.beginTime}}</p>
										</el-col>
									</el-row>
									<el-col :span="24">会议标题：{{item.meetingName}}</el-col>
									<el-col :span="24">
										<el-button style="float: right; padding: 3px 0" type="text"
											@click="enterRoom(item)">进入会议</el-button>
									</el-col>
								</el-row>
							</el-card>
						</div>
					</el-row>
				</el-col>
				<el-col :span="10">
					<div class="huiyi-title">
						<label>历史会议记录</label>
					</div>
					<el-input :placeholder="'会议名称、会议号、发起人'" v-model="select" style="margin-bottom: 20px;">
						<i class="el-icon-search" slot="prepend"></i>
					</el-input>
					<el-row class="huiyi-list">
						<el-card class="box-card" v-for="(item,key) in hyList" :key="key" style="margin-bottom: 20px;">
							<div slot="header" class="clearfix">
								<span>
									<span class="quanxuan" :class="item.all?'all':''" v-show="showType"
										@click="itemAll(key)">全选</span>
									{{item.date}}
								</span>
								<span style="float: right; padding: 3px 0">{{item.new}}</span>
							</div>
							<el-row class="huiyi-box">
								<el-col :span="18" class="huiyi-info">
									<span>
										{{item.meetingName}}
									</span>
									<p>{{item.masterName}}</p>
									<span>{{item.beginTime}}</span>
								</el-col>
								<el-col :span="6" class="huiyi-detail">
									<div @click="goHyDetail(item)">
										详情>
									</div>
								</el-col>
							</el-row>
							<!-- <div v-for="(subitem,index) in item.list" :key="index" @click="activeDelete(subitem.id)"
								class="text item" :class="showType && subitem.type?'active':''">
								<el-row class="huiyi-box">
									<el-col :span="18" class="huiyi-info">
										<span>
											{{subitem.id}}
										</span>
										<p>{{subitem.title}}</p>
										<span>{{subitem.time}}</span>
									</el-col>
									<el-col :span="6" class="huiyi-detail">
										<div @click="goHyDetail(item)">
											详情>
										</div>
									</el-col>
								</el-row>
							</div> -->
						</el-card>
					</el-row>
					<!-- <div class="btn-box">
						<el-button type="primary" v-show="!showType" @click="(showType =  true)" style="width: 100%;">管理
						</el-button>
						<div v-if="showType" style="display: flex;justify-content: space-between;">
							<el-button type="primary" v-show="showType" @click="itemAll(null)">全选</el-button>
							<div>
								<el-button type="danger" @click="deleteItem">删除</el-button>
								<el-button type="primary" @click="(showType =  false)">取消</el-button>
							</div>
						</div>
					</div> -->
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		ticket
	} from "@/api/trtc";
	import {
		listMeeting
	} from "@/api/system/meeting";
	export default {
		data() {
			return {
				all: false,
				showType: false,
				meetingList: [], //可参加的会议
				hyList: [{
					date: "4月26日 周二",
					new: "2022年",
					list: [{
						id: "856 528 939",
						title: "鸿雁（大森林）预定会议",
						time: "入会时间：12:41 发起人：鸿雁（大森林）",
					}, ],
				}, ],
				sdkInfo: {},
				select: "",
			};
		},
		computed: {
			...mapGetters(["userId"]),
			...mapGetters(["userObj"]),
		},
		created() {
			this.get_ticket();
			this.getMeetings();
		},
		methods: {
			enterRoom(item) {
				console.log(item.meetingRoomId)
				console.log(item)
				this.$router.push({
					path: "/rome",
					// name: "ConferenceRoom",
					query: {
						sdkInfo: this.sdkInfo,
						userId: this.userId,
						roomNum: item.meetingRoomId,
						meetingInfo: item,
					},
				});
			},
			deleteItem() {
				this.hyList.forEach((v, i) => {
					v.list.forEach((b, k) => {
						this.$set(this.hyList, i, v);
					});
				});
			},
			itemAll(k) {
				if (this.showType) {
					console.log(k);
					if (k != null) {
						this.hyList.forEach((v, i) => {
							if (k == i) {
								if (v.all) {
									v.all = false;
								} else {
									v.all = true;
								}
								v.list.forEach((b, k) => {
									if (v.all) {
										b.type = true;
									} else {
										b.type = false;
									}
									this.$set(this.hyList, i, v);
								});
							}
						});
					} else {
						if (this.listAll) {
							this.listAll = false;
						} else {
							this.listAll = true;
						}
						this.hyList.forEach((v, i) => {
							v.list.forEach((b, k) => {
								b.type = this.listAll;
								this.$set(this.hyList, i, v);
							});
						});
					}
				}
			},
			activeDelete(e) {
				this.hyList.forEach((v, i) => {
					v.list.forEach((b, k) => {
						if (b.id == e) {
							if (b.type) {
								b.type = false;
							} else {
								b.type = true;
							}
							this.$set(this.hyList, i, v);
						}
					});
				});
				console.log();
			},

			getMeetings() {
				let queryParams = {
					pageNum: 1,
					pageSize: 10,
					meetingMembers: this.userObj.phonenumber,
					status: 0,
				};
				listMeeting(queryParams).then((response) => {
					this.meetingList = response.rows;
					// this.meetingList = this.meetingList.concat(response.rows);
					// this.meetingList = this.meetingList.concat(response.rows);
					// this.meetingList = this.meetingList.concat(response.rows);
				});
				queryParams.status = 1;
				listMeeting(queryParams).then((response) => {
					this.hyList = response.rows;
					// this.hyList = this.hyList.concat(response.rows);
					// this.hyList = this.hyList.concat(response.rows);
					// this.hyList = this.hyList.concat(response.rows);
					// this.hyList = this.hyList.concat(response.rows);
				});
			},
			goHyDetail(item) {
				this.$router.push({
					path: "/detail",
					query: {
						meetingInfo: item
					},
				});
			},
			allhuiyi(e) {
				console.log(e);
				this.all = true;
			},
			kuaisu() {
				this.$router.push({
					path: "/rome",
					// name: "ConferenceRoom",
					query: {
						sdkInfo: this.sdkInfo,
						userId: this.userId,
						roomNum: this.randomRoomNum(),
					},
				});
			},
			yuyue() {
				this.$router.push({
					path: "/appointment",
					query: "",
				});
			},
			get_ticket() {
				//获取客户票据
				ticket({
					userId: this.userId,
				}).then((response) => {
					const {
						data
					} = response;
					this.sdkInfo = data;
				});
			},
			enter_room() {
				// this.test(this.userId)
				// this.$router.push({ path: '/trtc/room', query: { userId: this.userId }})
				this.$router.push({
					name: "Room",
					query: {},
					params: {
						sdkInfo: this.sdkInfo,
						userId: this.userId,
						roomNum: this.room_num,
					},
				});
			},
			randomRoomNum() {
				return  Math.floor(Date.now() / 1000)
				// return  Math.floor(Date.now() / 10000)
				// return Math.floor(Math.random() * 1000000).toString();
			},
			test(msg) {
				this.$alert(msg, {
					confirmButtonText: "确定",
					callback: (action) => {
						this.$message({
							type: "info",
							message: `action: ${action}`,
						});
					},
				});
			},
			dxqf(){
				this.$router.push({
					path: "/sendsms",
					query: "",
				});
			}
		},
	};
</script>
<style scoped>
	h2{
		margin-top: 0;
	}
	label {
		line-height: 40px;
	}

	.btn-add {
		display: block;
		width: 100%;
		border-radius: 10px;
		border: none;
		height: 100px;
		color: #ffffff;
		background-color: #1678ff;
	}

	.huiyi-title {
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
	}

	.huiyi-list {
		height: calc(90vh - 166px);
		overflow-x: hidden;
	}

	.huiyi-box {
		display: flex;
		align-items: flex-end;
	}

	.huiyi-info span {
		color: #9f9f9f;
	}

	.huiyi-info p {
		font-weight: bold;
		font-size: 18px;
	}

	.huiyi-detail {
		height: 100%;
		text-align: right;
		cursor: pointer;
	}

	.huiyi-detail div {
		color: #999999;
	}

	.huiyi-detail div:hover {
		color: #1678ff;
	}

	.item {
		margin: 10px 0;
		padding: 10px;
	}

	.btn-box {
		margin-top: 20px;
	}

	.quanxuan {
		cursor: pointer;
		padding: 5px 10px;
		border-radius: 5px;
		background-color: #eaeaea;
	}

	.active {
		background-color: #f0f8ff;
	}

	.all {
		background-color: #1678ff;
		color: #ffffff;
	}
</style>
